import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xiaomi/app/modules/goodList/views/good_list_view.dart';
import 'package:xiaomi/app/modules/tools/screenAdapter.dart';
import 'package:xiaomi/app/modules/tools/storageService.dart';

import '../../../routes/app_pages.dart';
import '../controllers/search_page_controller.dart';

class SearchPageView extends GetView<SearchPageController> {
  const SearchPageView({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          TextButton(
              onPressed: () {
                print('${controller.textEditingController.text}');
                // 点击搜索跳转到列表界面
                // Get.toNamed(Routes.GOOD_LIST);

                Get.offNamed(Routes.GOOD_LIST, arguments: {
                  'keywords': '${controller.textEditingController.text}'
                });
                // 同时保存到数据库
                StorageClient.setHis(controller.textEditingController.text);
              },
              child: Text(
                '搜索',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(40)),
              ))
        ],
        title: Container(
          width: ScreenAdapter.width(700),
          height: ScreenAdapter.height(90),
          decoration: BoxDecoration(
            color: Colors.black12,
            borderRadius: BorderRadius.circular(45),
          ),
          child: TextField(
            controller: controller.textEditingController,
            autofocus: true,
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search),
              hintText: '搜索',
              border: InputBorder.none,
            ),
            onChanged: (str) {},
            onSubmitted: (str) {},
          ),
        ),
        centerTitle: true,
      ),
      body: ListView(
        padding: EdgeInsets.only(left: 20, right: 20),
        children: [
          Obx(() => controller.hist.length > 0
              ? Container(
                  padding: EdgeInsets.only(bottom: 20),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '搜索历史',
                            style: TextStyle(
                                fontSize: ScreenAdapter.fontSize(40),
                                fontWeight: FontWeight.bold),
                          ),
                          InkWell(
                            child: const Icon(Icons.delete_forever_outlined),
                            onTap: () {
                              controller.deleteAll();
                            },
                          ),
                        ],
                      ),

                      /// 历史搜索记录
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          alignment: WrapAlignment.start,
                          spacing: 10,
                          runSpacing: 10,
                          children: controller.hist.map((title) {
                            return ElevatedButton(
                                onPressed: () {}, child: Text(title));
                          }).toList(),
                        ),
                      ),
                    ],
                  ),
                )
              : Text('')),

          /// 猜你喜欢
          Container(
            padding: EdgeInsets.only(top: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '猜你喜欢',
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(40),
                      fontWeight: FontWeight.bold),
                ),
                Icon(Icons.refresh)
              ],
            ),
          ),

          Container(
            alignment: Alignment.centerLeft,
            child: Wrap(
              alignment: WrapAlignment.start,
              spacing: 10,
              runSpacing: 10,
              children: [
                ElevatedButton(onPressed: () {}, child: Text('京东')),
                ElevatedButton(onPressed: () {}, child: Text('apple电脑')),
                ElevatedButton(onPressed: () {}, child: Text('华为手机')),
                ElevatedButton(onPressed: () {}, child: Text('OPPO')),
                ElevatedButton(onPressed: () {}, child: Text('彩电收拾收拾')),
              ],
            ),
          ),

          // 底部组件
          Container(
            // color: Colors.blue,
            width: double.infinity,
            margin: EdgeInsets.only(top: 20),
            child: Column(
              children: [
                Image.asset(
                  'assets/images/hot_search.png',
                  fit: BoxFit.fitHeight,
                  width: double.maxFinite,
                ),
                GridView.builder(
                    shrinkWrap: true,
                    itemCount: 10,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 5,
                      mainAxisSpacing: 5,
                      childAspectRatio: 3 / 2,
                    ),
                    itemBuilder: (context, index) {
                      return Row(
                        children: [
                          Expanded(
                            child: Image.network(
                              'https://miapp.itying.com/public/upload/4uN_xCK69oV4vMMJREI_2-HN.jpg',
                              fit: BoxFit.fitHeight,
                            ),
                            flex: 1,
                          ),
                          Expanded(
                            child: Text('手机像素超级好的一个'),
                            flex: 1,
                          )
                        ],
                      );
                    }),
              ],
            ),
          )
        ],
      ),
    );
  }
}
